<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@include file="/common/head.jsp" %>
<style>
	#zoomout {
		position: absolute;
	    background-color: rgba(0,0,0,0.7);
	    width: 50%;
	    height: 70%;
	    left: 20%;
	    top: 15%;
	    display: none;
	}
	#zoomout img {
		background-color: #fff;
	    width: 50%;
	    height: 80%;
	    position: absolute;
	    left: 25%;
	    top: 10%;
	}
</style>

<c:set var="module" value="product"/>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                    	<form role="form" class="form-inline" id="query-form" method="post" action="${ctx }/admin/product/list" >
                    		<!-- 查询开始 -->
                            <div class="form-group">
                                <label for="query-name" class="sr-only">关键词</label>
                                	<input type="text" placeholder="关键词" id="query-name" name="searchTerm" value="${query.searchTerm }" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="query-productCategory" class="sr-only">商品分类</label>
                                	<%-- <input type="text" placeholder="商品分类" id="query-productCategory" name="productCategory" value="${query.productCategory }" class="form-control"> --%>
                                	<input type="hidden" id="productCategory-id" name="productCategory.id" value="${query.productCategory.id }" class="form-control">
				                 	<input type="text" placeholder="商品分类" class="form-control" id="productCategory-name" name="productCategory.name" value="${query.productCategory.name }" 
				                 		onclick="bringTree({
										                 	url:'${ctx}/admin/productCategory/list',
										                 	name: 'name',
										                 	idInput: 'productCategory-id',
										                 	nameInput: 'productCategory-name'
										                 	})" />
                            </div>
                            <div class="form-group">
                                <label for="query-sellingStatus" class="sr-only">上下架状态</label>
                                	<%-- <input type="text" placeholder="上下架状态" id="query-sellingStatus" name="sellingStatus" value="${query.sellingStatus }" class="form-control"> --%>
                                	<select name="sellingStatus" class="form-control">
                                		<option value="">请选择上下架状态</option>	
	                                	<c:forEach items="${pss }" var="ts">
	    		                            <option value="${ts.value }" <c:if test="${ts.value eq query.sellingStatus }">selected="selected"</c:if>>${ts.remark }</option>
	                                	</c:forEach>
                                	</select>  
                            </div>
                            <div class="form-group">
                                <label for="query-isRecommend" class="sr-only">是否首页推荐</label>
                                	<%-- <input type="text" placeholder="是否首页推荐" id="query-isRecommend" name="isRecommend" value="${query.isRecommend }" class="form-control"> --%>
                                	<select class="form-control" name="isRecommend">
                                		<option value="">请选择是否首页推荐</option>	
				                 		<option value="1" <c:if test="${query.isRecommend eq true }">selected="selected"</c:if>>是</option>
				                 		<option value="0" <c:if test="${query.isRecommend eq false }">selected="selected"</c:if>>否</option>
				                 	</select>
                            </div>
                            <div class="form-group">
                                <label for="query-brand" class="sr-only">品牌</label>
                                	<%-- <input type="text" placeholder="品牌" id="query-brand" name="brand" value="${query.brand }" class="form-control"> --%>
                                	<input type="hidden" id="brand-id" name="brand.id" value="${query.brand.id }" class="form-control">
				                 	<input type="text"  placeholder="品牌" class="form-control" id="brand-name" name="brand.name" value="${query.brand.name }" 
				                 		onclick="bring({
										                 	url:'${ctx}/admin/brand/list',
										                 	name: 'name',
										                 	idInput: 'brand-id',
										                 	nameInput: 'brand-name'
										                 	})" />
                            </div>
                            <div class="form-group">
                                <label for="query-sellingStatus" class="sr-only">审核状态</label>
                                	<select name="status" class="form-control">
                                		<option value="">请选择审核状态</option>	
	                                	<c:forEach items="${prss }" var="ts">
	    		                            <option value="${ts.value }" <c:if test="${ts.value eq query.status }">selected="selected"</c:if>>${ts.remark }</option>
	                                	</c:forEach>
                                	</select>  
                            </div>
                            <div class="form-group">
                            	<button class="btn btn-primary form-control" type="submit"><i class="fa fa-check"></i>&nbsp;查询</button>
                            </div>
                            <!-- 查询结束 -->
                        </form>
                        
                    
						<div>
							<p>
								
		                        <button type="button" class="btn btn-outline btn-primary" onclick="add()">新增</button>
		                        
		                        
		                        
		                        <!-- 
		                        <button type="button" class="btn btn-outline btn-info" onclick="edit()">详情</button>
		                         -->
		                        
		                        
		                        <button type="button" class="btn btn-outline btn-danger" onclick="del();">删除</button>
		                        
		                         
		                        
		                        <!-- <input type="file" id="upload" style="display:none;" onchange="uploadFile(this)" /> -->
		                        <button type="button" class="btn btn-outline btn-primary" onclick="upload();">上传产品</button>
		                        
		                        
		                        
		                        <input type="file" id="upload2" style="display:none;" onchange="uploadFile2(this)" multiple="multiple" />
		                        <button type="button" class="btn btn-outline btn-primary" onclick="upload2();">上传图片</button>
		                        
		                        
		                        
		                        <button type="button" class="btn btn-outline btn-primary" onclick="review();">审核</button>
		                        <button type="button" class="btn btn-outline btn-primary" onclick="allPass();">批量审核通过</button>
		                        
		                        <!-- 
		                        <input type="file" id="fixSpec" style="display:none;" onchange="fixSpec(this)" multiple="multiple" />
		                        <button type="button" class="btn btn-outline btn-primary" onclick="uploadSpec();">修复规格</button>
		                        
		                        <input type="file" id="fixPrice" style="display:none;" onchange="fixPrice(this)" multiple="multiple" />
		                        <button type="button" class="btn btn-outline btn-primary" onclick="uploadPrice();">修复价格</button>
		                        
		                        <input type="file" id="fixBrand" style="display:none;" onchange="fixBrand(this)" multiple="multiple" />
		                        <button type="button" class="btn btn-outline btn-primary" onclick="uploadBrand();">修复品牌</button>
		                         -->
		                         
		                        <button type="button" class="btn btn-outline btn-primary" onclick="allSellStatusOn();">批量上架</button>
		                        <button type="button" class="btn btn-outline btn-primary" onclick="allSellStatus();">批量下架</button>
		                    </p>
						</div>
						<table id="table" data-toggle="table" data-height="400" data-click-to-select="true" data-mobile-responsive="true">
                                    <thead>
                                        <tr>
                                            <th data-field="state" data-checkbox="true"></th>
                                            <th data-field="id">id</th>
                                            <th data-field="brand">品牌</th>
                                            <th data-field="name">商品名称</th>
                                            <th data-field="ogCode">欧工编码</th>
                                            <th data-field="factoryCode">工厂编码</th>
                                            <!-- 
                                            <th data-field="store">店铺</th>
                                            <th data-field="subTitle">副标题</th>
                                            <th data-field="unit">单位</th>
                                             -->
                                            <th data-field="productCategory">商品分类</th>
                                            <th data-field="sellingStatus">上下架状态</th>
                                            <th data-field="status">审核状态</th>
                                            <th data-field="isRecommend">是否首页推荐</th>
                                            <th data-field="images">图片</th>
                                            <th data-field="createTime">上传时间</th>
                                            <th data-field="lastUpdateTime">最后更新时间</th>
                                            <th data-field="operation">操作</th>
                                        </tr>
                                    </thead>
							<tbody>
								<c:forEach items="${list }" var="n" varStatus="idx">
								<tr data-index="${idx.index }">
									<td class="bs-checkbox">
										<input data-index="0" name="btSelectItem" type="checkbox">
									</td>
									<td style="">${n.id }</td>
									<td style="">${n.brand.name}</td>
									<td style="">
										<a href="javascript:void(0);" onclick="edit2('${n.id}')">${n.name }</a>
									</td>
									<td>
										<c:forEach items="${n.specifications }" var="s">
										${s.ogCode }<br/>
										</c:forEach>
									</td>
									<td>
										<c:forEach items="${n.specifications }" var="s">
										${s.factoryCode }<br/>
										</c:forEach>										
									</td>
									<!-- 
									<td style="">${n.store.name}</td>
									<td style="">${n.subTitle }</td>
									<td style="">${n.unit }</td>
									 -->
									<td style="">${n.productCategory.name}</td>
									<td style="">
										<c:if test="${empty n.sellingStatus }">
											下架
										</c:if>
										<c:if test="${not empty n.sellingStatus }">
											${enum:list('ProductSellingStatus', n.sellingStatus)}
										</c:if>
									</td>
									<td>
										${enum:list('ProductStatus', n.status) }
									</td>
									<td style="">${n.isRecommend ? '是' : '否' }</td>
									<td class="imagebox">
										<img src="${n.headImage }-w40" alt="" class="list-image" data-toggle="tooltip" path="${n.headImage }"/>
								    </td>
									<td style="">
										<fmt:formatDate value="${n.createTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
									</td>
									<td style="">
										<fmt:formatDate value="${n.lastUpdateTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
									</td>
									<td>
										<a href="javascript:void(0);" class="btn" onclick="spec('${n.id}')">规格</a>
									</td>
								</tr>
								</c:forEach>
							</tbody>
						</table>
                   
						<div class="row">
							<div class="col-sm-6">
								<div class="dataTables_info" id="DataTables_Table_0_info"
									role="alert" aria-live="polite" aria-relevant="all">显示第 ${(page.page - 1) * page.pageSize  + 1}
									到第 ${(page.page) * page.pageSize} 项，共 ${page.totalRecords } 项</div>
							</div>
							<div class="col-sm-6">
								<div class="dataTables_paginate paging_simple_numbers"
									id="DataTables_Table_0_paginate">
									<ul class="pagination" id="pagination">
									</ul>
								</div>
							</div>
						</div>

					</div>
                </div>
            </div>
        </div>
    </div>
<div id="zoomout"><img alt="" src=""></div>
<%@include file="/common/foot.jsp" %>
<script>
$(document).ready(function(){
	$(".list-image").mouseenter(function(e){
	    var url = $(this).attr('path');
	    $('#zoomout').find('img').attr('src', url);
	    $('#zoomout').show();
	}).mouseout(function(){
		$('#zoomout').hide();
	});
}); 


function fixSpec(input) {
	var fd = new FormData();
	fd.append("file", input.files[0]);
	
	loading();
	$.ajax({
		url: "${ctx}/admin/product/uploadFixSpec",
		type: "POST",
		dataType: "json",
		processData: false,
		contentType: false,
		data: fd,
		dataType: "json",
		success: function(data) {
			cancelLoading();
			if (data.success || data.statusCode == '200') {
				ok();
				reload();
			} else {
				error(data.msg);
			}
		}
	});
}

function fixPrice(input) {
	var fd = new FormData();
	fd.append("file", input.files[0]);
	
	loading();
	$.ajax({
		url: "${ctx}/admin/product/uploadFixPrice",
		type: "POST",
		dataType: "json",
		processData: false,
		contentType: false,
		data: fd,
		dataType: "json",
		success: function(data) {
			cancelLoading();
			if (data.success || data.statusCode == '200') {
				ok();
				reload();
			} else {
				error(data.msg);
			}
		}
	});
}

function fixBrand(input) {
	var fd = new FormData();
	fd.append("file", input.files[0]);
	
	loading();
	$.ajax({
		url: "${ctx}/admin/product/uploadFixBrand",
		type: "POST",
		dataType: "json",
		processData: false,
		contentType: false,
		data: fd,
		dataType: "json",
		success: function(data) {
			cancelLoading();
			if (data.success || data.statusCode == '200') {
				ok();
				reload();
			} else {
				error(data.msg);
			}
		}
	});
}

function uploadSpec() {
	 $('#fixSpec').click();
}

function uploadPrice() {
	 $('#fixPrice').click();
}

function uploadBrand() {
	 $('#fixBrand').click();
}


function uploadFile2(input) {
	var fd = new FormData();
	for (var i = 0; i < input.files.length; i++) {
		fd.append("files", input.files[i]);
	}
	
	loading();
	$.ajax({
		url: "${ctx}/admin/product/uploadImages",
		type: "POST",
		processData: false,
		contentType: false,
		data: fd,
		dataType: "json",
		success: function(data) {
			cancelLoading();
			if (data.success || data.statusCode == '200') {
				ok();
				reload();
			} else {
				error(data.msg);
			}
		}
	});
}

function upload() {
	/* $('#upload').click(); */
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_default_width, layer_default_height], //宽高
	    content: "${ctx}/admin/product/productUpload",
	    btn: ['确定', '取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	layer.close(index);
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
}

function upload2() {
	$('#upload2').click();
}

function review() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length == 0) {
		error('请选择一条记录');
		return;
	} else if (selections.length > 1) {
		error('只能选择一条记录');
		return;
	}
	var id = selections[0].id;
	
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_default_width, layer_default_height], //宽高
	    content: "${ctx}/admin/product/review?id=" + id,
	    btn: ['确定', '取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	var detailForm = layer.getChildFrame('form', index);
	    	console.log(detailForm);
	    	detailForm.ajaxSubmit({
	    		success: function(data) {
	    			if (isSuccess(data)) {
	    				layer.close(index);
	    				reload();
	    			} else {
	    			}
	    		}
	    	});
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
}

function add() {
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_default_width, layer_default_height], //宽高
	    content: "${ctx}/admin/product/detail",
	    btn: ['确定', '取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	var detailForm = layer.getChildFrame('form', index);
	    	console.log(detailForm);
	    	detailForm.ajaxSubmit({
	    		success: function(data) {
	    			if (isSuccess(data)) {
	    				layer.close(index);
	    				reload();
	    			} else {
	    			}
	    		}
	    	});
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
}


function edit2(id) {
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_default_width, layer_default_height], //宽高
	    content: "${ctx}/admin/product/detail?id=" + id,
	    btn: ['确定', '取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	var detailForm = layer.getChildFrame('form', index);
	    	console.log(detailForm);
	    	detailForm.ajaxSubmit({
	    		success: function(data) {
	    			if (isSuccess(data)) {
	    				layer.close(index);
	    				reload();
	    			} else {
	    			}
	    		}
	    	});
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
}
var page = "${page.page}";
function reload() {
	page_submit(page);
}
function del() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length < 1) {
		error('请选择要删除的记录');
		return;
	}
	layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
		var ids = new Array();
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		$.ajax({
			url: "${ctx}/admin/product/delete",
			data: {
				ids: ids.join(',')
			},
			success: function(data) {
				if (isSuccess(data)) {
					layer.close(index);
					reload();
				}
			}
		});
	});
	
}

function allPass() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length < 1) {
		error('请选择要审核的记录');
		return;
	}
	layer.confirm('确认要批量审核通过吗?', {icon: 3, title:'提示'}, function(index){
		var ids = new Array();
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		$.ajax({
			url: "${ctx}/admin/product/doReviewAll",
			data: {
				ids: ids.join(',')
			},
			success: function(data) {
				if (isSuccess(data)) {
					layer.close(index);
					reload();
				}
			}
		});
	});
	
}

function allSellStatus() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length < 1) {
		error('请选择要下架的记录');
		return;
	}
	layer.confirm('确认要批量下架吗?', {icon: 3, title:'提示'}, function(index){
		var ids = new Array();
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		$.ajax({
			url: "${ctx}/admin/product/doSellStatusAll",
			data: {
				ids: ids.join(',')
			},
			success: function(data) {
				if (isSuccess(data)) {
					layer.close(index);
					reload();
				}
			}
		});
	});
}

function allSellStatusOn() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length < 1) {
		error('请选择要上架的记录');
		return;
	}
	layer.confirm('确认要批量上架吗?', {icon: 3, title:'提示'}, function(index){
		var ids = new Array();
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		$.ajax({
			url: "${ctx}/admin/product/updateOnline",
			data: {
				ids: ids.join(',')
			},
			type: "post",
			dataType: "json",
			success: function(data) {
				if (isSuccess(data)) {
					layer.close(index);
					reload();
				}
			}
		});
	});
}

paging('pagination', ${page.totalPages}, ${page.page});

function spec(id) {
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_big_width, layer_big_height], //宽高
	    content: "${ctx}/admin/specification/list?product.id=" + id,
	    btn: ['确定', '取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	var detailForm = layer.getChildFrame('form', index);
	    	console.log(detailForm);
	    	detailForm.ajaxSubmit({
	    		success: function(data) {
	    			if (isSuccess(data)) {
	    				layer.close(index);
	    				reload();
	    			} else {
	    			}
	    		}
	    	});
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
}


</script>
</body>
</html>